<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta charset="utf-8" />
	<title></title>
	<link href="../css/bootstrap.min.css" rel="stylesheet">
	<link href="../css/bootstrap-select.css" rel="stylesheet">
	<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
	<link href="../css/bootstrap-table.css" rel="stylesheet">
	<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
	<link href="../css/font-awesome.min.css" rel="stylesheet">
	<link href="../css/JyyCommon.css" rel="stylesheet">
	<link href="../css/JyyTable.css" rel="stylesheet">
	<link href="../css/JyyTree.css" rel="stylesheet">
	<link href="../css/JyyMsgBox.css" rel="stylesheet">
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="../js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-select.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table.js"></script>
	<script type="text/javascript" src="../js/bootstrap-table-fixed-columns.js"></script>
	<script type="text/javascript" src="../js/jyy_modal.js"></script>
	<script type="text/javascript" src="../js/JyyCommon.js"></script>
	<script type="text/javascript" src="../js/JyyTable.js"></script>
	<script type="text/javascript" src="../js/JyyTree.js"></script>
	<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
	<script type="text/javascript" src="../js/JyyLoading.js"></script>
	<script type="text/javascript" src="../js/echarts.js"></script>
    <script type="text/javascript" src="../../utils/CommonUtil.js"></script>
</head>
<script type="text/javascript">
	var projectId =  getQueryString("projectId")||'88888888888';
	$(function(){
		getCardData();
		getFirstSelectDatas();
	});

	function selectCapData(){
		$.when(getTableData("selectSumTableData")).done(function(data){
			createTable(data.respData, 1);
		}); 
		JyyModelLoading.start("firstEchart");
		$.when(getEcahtData("selectSumPieEchartData")).done(function(echatData){
			createSinglePieEchat(echatData.respData, 1);
			JyyModelLoading.end("firstEchart");
		});
		var typeSel =  $('#typeSel').val(); 
		if(JyyCommon.isEmpty(typeSel)){
			return false;
		}
		JyyModelLoading.start("secondEchart");
		$.when(getEcahtData("selectTypePieEchartData", typeSel)).done(function(echatData){
			createSinglePieEchat(echatData.respData, 2);
			JyyModelLoading.end("secondEchart");
		});
		var companySel =  $('#companySel').val(); 
		if(JyyCommon.isEmpty(companySel)){
			return false;
		}
		JyyModelLoading.start("thridEchart");
		$.when(getEcahtData("selectCompanyPieEchartData", companySel)).done(function(echatData){
			createSinglePieEchat(echatData.respData, 3);
			JyyModelLoading.end("thridEchart");
		});
		JyyModelLoading.start("installCapEchart");
		$.when(getEcahtData("selectInstallCapEchartData", companySel)).done(function(echatData){
			createEchat(echatData.respData, 1);
			JyyModelLoading.end("installCapEchart");
		});
		JyyModelLoading.start("installCapTable");
		$.when(getTableData("selectInstallCapTableData")).done(function(data){
			createTable(data.respData, 2);
			JyyModelLoading.end("installCapTable");
		}); 
	}

	function createEchat(echartData, code) {
		var id = "";
		var option = {};
		var xAxisName = "";
		var yAxisName = "";
		if(code == 1) {
			id = "installCapEchart";
			yAxisName = "数量";
		} else if(code == 2) {
			id = "sysELeMonthEchart";
			xAxisName = "日";
			yAxisName = "亿kWh";
		}
		var xAxisData = echartData.xAxisData;
		var seriesData = [];
		for(var i = 0; i < echartData.seriesData.length;i++) {
			var name = echartData.seriesData[i].name;
			var series = echartData.seriesData[i].series;
			seriesData.push({
				name: name,
				type: 'bar',
			    stack: '总',
			    data: series
			});
		}
		option = {
		  	tooltip: {
		    	trigger: 'axis',
		    	axisPointer: {
		      		type: 'cross',
		      		label: {
		        		backgroundColor: '#6a7985'
		      		}
		    	},
		    	position: function(point, params, dom, rect, size) {
		             //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
		             var x = point[0]; //
		             var y = point[1];
		             var viewWidth = size.viewSize[0];
		             var viewHeight = size.viewSize[1];
		             var boxWidth = size.contentSize[0];
		             var boxHeight = size.contentSize[1];
		             var posX = 0; //x坐标位置
		             var posY = 0; //y坐标位置

		             if (x < boxWidth) { //左边放不开
		                 posX = 5;
		             } else { //左边放的下
		                 posX = x - boxWidth;
		             }

		             if (y < boxHeight) { //上边放不开
		                 posY = 5;
		             } else { //上边放得下
		                 posY = y - boxHeight;
		             }

		             return [posX, posY];
		         }
		  	},
			toolbox: {
				show: true,
				right: 30,
			    itemSize: 20,
				itemGap: 12,
		        feature: {
		        	myTool: {
		        		show: true,
		        		title: "导出为Excel",
		        		icon: 'image://../images/excel.png',
		        		onclick: (o) => {
							var option = o.option;
							var dataSource = [];
							var dataType = "\uFEFF"; //解决乱码问题
							dataType += option.xAxis[0].name+",";  //添加表格的头
							if(option.series.length > 0) {
								for(var i = 0;i < option.series.length;i++) {
									dataType += option.series[i].name+","
								}
								dataType = dataType.substr(0, dataType.length-1)
							}
							dataType += '\n'; // 以上是导出的Excel文件头部

							for(var i = 0;i < option.xAxis[0].data.length;i++) {
								var arr = [];
								for(var j = 0;j < option.series.length+1;j++) {
									if(j == 0) {
										arr.push(option.xAxis[0].data[i]);
									} else {
										arr.push(option.series[j-1].data[i]);
									}
								}
								dataSource.push(arr);
							}
							// 从dataSource中取出数据存入数据源（dataType）
							dataSource.map(item => dataType += `${item.join(',')}\n`); 
							// 使用Blob，获得二进制实例
							const csvData = new Blob([dataType], {
							    type: 'text/csv'
							});
							// 创建a标签
							const _a = document.createElement('a');
							_a.href = URL.createObjectURL(csvData);
							_a.target = '_blank';
							_a.download = '各地市各类型机组装机'+JyyCommon.getNowDateString()+`.csv`;
							document.body.appendChild(_a);
							_a.click();
							document.body.removeChild(_a);
	                   	},
		        	},
		        	saveAsImage: {name:'各地市各类型机组装机'+JyyCommon.getNowDateString(),icon:"image://../images/downpic.png"}
		        }
		    },
		  	grid: {
		    	left: '3%',
		    	right: '8%',
		    	bottom: '3%',
		    	containLabel: true
		  	},
		  	xAxis: [{
		    	type: 'category',
		    	name: xAxisName,
		      	data: xAxisData
		    }],
		  	yAxis: [{
		      	type: 'value',
		      	name: yAxisName
		    }],
			legend: {},
		  	series: seriesData
		};
		var chartDom = document.getElementById(id);
		var myChart = echarts.init(chartDom);
		myChart.clear();
		myChart.setOption(option);
		window.addEventListener("resize", () => {
			if(myChart){
				myChart.resize()
			}
		})
	}

	function createSinglePieEchat(echartData, code) {
		var id = "";
		var option = {};
		var title = "";
		var seriesName = "";
		if(code == 1) {
			id = "firstEchart";
			title = "省内总装机";
			seriesName = "汇总";
		} else if(code == 2) {
			id = "secondEchart";
			title = "总装机";
			seriesName = "分发电公司";
		} else if(code == 3) {
			id = "thridEchart";
			title = "总装机";
			seriesName = "分类型";
		}
		option = {
			title:{
				text: ['{name|'+title+'}', '{value|'+echartData.titleData+'}', '{unit|MW}'].join('\n '),
			    top: "143px",
			    left: "162px",
			    textAlign: 'center',
			    textVerticalAlign: 'middle',
			    textStyle: {
			    	rich: {
				        name: {
				        	fontFamily: "PingFangSC-Regular",
				          	fontSize: 14,
				          	color: "rgba(0,0,0,0.45)",
				          	lineHeight: 22,
					    	align: 'center',
				          	marginBottom: "3px"
				        },
				        value: {
				          	fontFamily: "HelveticaNeue",
				          	fontSize: 30,
				          	color: "rgba(0,0,0,0.85)",
					    	align: 'center',
				          	lineHeight: 38,
				          	marginBottom: "3px"
				        },
				        unit: {
				        	fontFamily: "PingFangSC-Regular",
				          	fontSize: 14,
				          	color: "rgba(0,0,0,0.45)",
					    	align: 'center',
				          	lineHeight: 22
				        }
			        }
			    }
		    },
		  	tooltip: {
		    	trigger: 'item',
		  	},
			legend: {
			    icon: "circle",
			    itemWidth: 10,
			    itemHeight: 10,
			    orient: 'vertical',
			    align: 'left',
			    height: 150,
			    width: 300,
			    itemGap: 15,
			    y: 'bottom',
			    selectedMode: false,
			    textStyle: {
    	          rich: {
    	            name: {
    	              verticalAlign: "right",
    	              align: "left",
    	              width: 75,
    	              fontSize: 12,
    	            },
    	            value: {
    	              align: "left",
    	              width: 35,
    	              fontSize: 12,
    	            },
    	            count: {
    	              align: "left",
    	              width: 20,
    	              fontSize: 12,
    	            },
    	            upRate: {
    	              align: "left",
    	              fontSize: 12,
    	              color: "#54bef9",
    	            },
    	            downRate: {
    	              align: "left",
    	              fontSize: 12,
    	              color: "#54bef9",
    	            },
    	          },
    	          color: "#54bef9",
    	        },
			    formatter: function (name) {
			    	var total = 0;
			        var tarValue;
			        for (var i = 0; i < echartData.seriesData.length; i++) {
			        	total += echartData.seriesData[i].value;
			            if (name === echartData.seriesData[i].name) {
			            	tarValue = echartData.seriesData[i].value;
			            }
			        }
			        var p = Math.round((tarValue / total) * 100);
			        p = isNaN(p)?0:p;
			    	return "{name| " + name + "} " + "  {value| " + p + "%}";
		        },
			},
		  	series: [{
		  		name: seriesName,
		  	    type: 'pie',
		  	    radius: ['45%', '60%'],
		        center:['40%','33%'],
		        avoidLabelOverlap: false,
		        label: {
		          	show: false,
		            position: 'center',
		            formatter: ['{name|{b}}', '{value|{c}}', '{unit|MW}'].join('\n '),
		            textStyle: {
		            	rich: {
		            		name: {
		            	    	fontFamily: "PingFangSC-Regular",
		            	        fontSize: 14,
		            	        color: "rgba(0,0,0,0.45)",
		            	        lineHeight: 22,
		            	        marginBottom: "3px"
		            	    },
		            	    value: {
		            	    	fontFamily: "HelveticaNeue",
		            	        fontSize: 30,
		            	        color: "rgba(0,0,0,0.85)",
		            	        lineHeight: 38,
	            	        },
					        unit: {
					        	fontFamily: "PingFangSC-Regular",
					          	fontSize: 14,
					          	color: "rgba(0,0,0,0.45)",
					          	lineHeight: 22
					        }
	            		}
		            }
		        },
		  	    data: echartData.seriesData,
		  	    emphasis: {
		  	    	itemStyle: {
		  	        	shadowBlur: 10,
		  	          	shadowOffsetX: 0,
		  	          	shadowColor: 'rgba(0, 0, 0, 0.5)'
		  	        },
		  	        label: {
		  	          show: true
		  	        }
		  	    }
			}]
		};
		var chartDom = document.getElementById(id);
		echarts.init(chartDom).dispose();
		var myChart = echarts.init(chartDom);
		myChart.setOption(option);
		window.addEventListener("resize", () => {
			if(myChart){
				myChart.resize()
			}
		})
		myChart.on('mouseover', (params) => {
		  	option.title.show = false
		  	myChart.setOption(option);
		});
		myChart.on('mouseout', () => {
		  	option.title.show = true
		  	myChart.setOption(option);
		});
	}
	
	function createTable(tableData, code) {
		var id = "";
		var table = {};
		tableData.columnsList[0].cellStyle = function(value,row,index){
			return { classes:"bg-primary" };
		};
		if(code == 1) {
			id = "tableDetail";
			table = {
		    	cache: false,
		    	fixedColumns:true,
		        fixedNumber:1,
		        theadClasses: "bg-primary",
		    	columns: tableData.columnsList,
		    	data: tableData.dataList,
		    	height: 400
		    };
		} else if(code == 2){
			id = "installCapTable";
			table = {
		    	cache: false,
		    	fixedColumns:true,
		        fixedNumber:1,
		        theadClasses: "bg-primary",
		    	columns: tableData.columnsList,
		    	data: tableData.dataList,
		    	height: 400
		    };
		}
		$('#'+id).bootstrapTable('destroy').bootstrapTable(table);
		var div = document.getElementById(id).parentNode;
		if (div.scrollWidth <= div.clientWidth) {
			div.parentNode.removeChild(div.parentNode.getElementsByClassName("fixed-columns")[0]);
		}
	}
	
	//查询
	function select(){
		selectData();
	}

	function getQueryString (name){
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		return r ? unescape(r[2]) : null;
	}

	function getFirstSelectDatas(){
		$.ajax({
			url: "Sample/getTypeAndCompany",
			type:'POST',
			async:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId }),
			contentType:"application/json",
	        success:function(data){
				var content = '';
				$.each(data.respData.type,function(i,n){
					if(i == 0){
						content += "<option value='" + n.code + "' selected>"+ n.name +"</option>";
					} else {
						content += "<option value='" + n.code + "'>"+ n.name +"</option>";
					}
				});
				$("#typeSel").html(content);

				var content1 = '';
				$.each(data.respData.company,function(i,n){
					if(i == 0){
						content1 += "<option value='" + n.code + "' selected>"+ n.name +"</option>";
					} else {
						content1 += "<option value='" + n.code + "'>"+ n.name +"</option>";
					}
				});
				$("#companySel").html(content1);
				$('.selectpicker').selectpicker('refresh');
				selectCapData();
	        }
		});
		$("#typeSel").change(function(){
			var typeSel =  $('#typeSel').val(); 
			if(JyyCommon.isEmpty(typeSel)){
				JyyMsgBox.alert({ title:"警告", message:"[装机类型]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyModelLoading.start("secondEchart");
			$.when(getEcahtData("selectTypePieEchartData", typeSel)).done(function(echatData){
				createSinglePieEchat(echatData.respData, 2);
				JyyModelLoading.end("secondEchart");
			});
		});
		$("#companySel").change(function(){
			var companySel =  $('#companySel').val(); 
			if(JyyCommon.isEmpty(companySel)){
				JyyMsgBox.alert({ title:"警告", message:"[发电公司]不可为空",type:"warning"}).on(function (e) {});
				return false;
			}
			JyyModelLoading.start("thridEchart");
			$.when(getEcahtData("selectCompanyPieEchartData", companySel)).done(function(echatData){
				createSinglePieEchat(echatData.respData, 3);
				JyyModelLoading.end("thridEchart");
			});
		});
	}

	function getCardData(){
		$.ajax({
			url: "Sample/getMainCardData",
			type:'POST',
			cache:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId }),
			contentType:"application/json",
            success:function(data){
            	var content = $("#sysInstallVal").html();
            	content = content.replace("0", data.respData.sysInstall );
            	$("#sysInstallVal").html(content);

            	var content1 = $("#nodeNumVal").html();
            	content1 = content1.replace("0", data.respData.nodeNum );
            	$("#nodeNumVal").html(content1);

            	var content2 = $("#lineNumVal").html();
            	content2 = content2.replace("0", data.respData.lineNum );
            	$("#lineNumVal").html(content2);

            	var content3 = $("#maxLoadVal").html();
            	content3 = content3.replace("0", data.respData.maxLoad );
            	$("#maxLoadVal").html(content3);

            	var content4 = $("#loadPowerVal").html();
            	content4 = content4.replace("0", data.respData.loadPower );
            	$("#loadPowerVal").html(content4);
            	
            	var content5 = $("#externalInsVal").html();
            	content5 = content5.replace("0", data.respData.externalIns );
            	$("#externalInsVal").html(content5);
            }
		});
	}

	function getEcahtData(method, keyword){
		var res = $.ajax({
			url: "Sample/"+method,
			type:'POST',
			cache:false,
			dataType: "json",
			data:JSON.stringify({ projectId : projectId, keyword : keyword }),
			contentType:"application/json",
            success:function(data){
				return data;
            }
		});
		return res;
	}
	
	function jumpTo(code) {
		parent.jumpToTree(code);
	}

	function getTableData(method, keyword) {
		var res = $.ajax({
			url: "Sample/" + method,
			type:'POST',
			cache:false,
			/*async:false,*/
			dataType: "json",
			data:JSON.stringify({ projectId : projectId, keyword : keyword }),
			contentType:"application/json",
	        success:function(data){
				return data;
	        }
		});
		return res;
	}

	function invoke(url, args, callback){
		var r, op = {
				url: 'Sample/' + url,
				type:'POST',
				cache:false,
				async:true,
				dataType:'json',
				data:args ? JSON.stringify(args) : null,
				contentType:"application/json"
			};
		if(typeof callback == 'function'){
			op.success = function(data){
				if(data.error)return alert(data.error);
				callback(data);
			}
		} else {
			op.async = false;
			op.success = function(data){
				r = data
			};
		}
		$.ajax(op);
		if(r)if(r.error){
			alert(r.error);
			return null;
		}
		return r;
	};
</script>
<style type="text/css">
	body, html{
		width: 100%;
		height: 100%;
	}
	.shadow {
		box-shadow: 0 0.05rem 1rem rgba(0,0,0,0.15)!important;
		border-radius: 0.25rem!important;
		margin-left: 20px;
	}
	.card {
		margin-left: 10px;
		min-width: 230px;
		width: 15%;
		height: 138px;
		border-radius: 10px;
		padding-top: 15px;
		margin-right: 10px;
		display : inline-block;
		margin-top: 20px;
	}
	.cardTitle {
		padding-left: 15px;
		font-size: 14px;
		font-weight: bold;
		color: white;
	}
	.leftContent {
		text-align: center;
		vertical-align: middle;
		color: white;
		font-size: 32px;
		font-weight: bolder;
	    padding-left: 30px;
	}
	.rightUnit {
		float: right;
		margin-top: 30px;
		margin-right: 20px;
	}
	.downDiv {
		background-color: rgb(0, 0, 0 ,0.1);
		min-width: 230px;
		width: 15%;
		color: white;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		height: 32px;
		display: table-cell;
		vertical-align: middle;
		cursor: pointer;
	}
	.downLeft {
		margin-left: 20px;
		color: white;
		font-size: 14px;
		font-weight: bold;
	}
	.shadow::-webkit-scrollbar-thumb,#pieDiv::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1);
        outline-color: #ccc;
    }
    .pie {
    	margin-left: 10px;
    	width: 420px;
    	height: 500px;
    	margin-top: 10px;
    	display: inline-block;
    }
	.bootstrap-table {
		margin: 30px!important;
		margin-top: 0px!important;
		width: calc(100% - 60px);
	}
	thead tr:first-child {
		background-color: #4090E7;
        position:sticky;
        padding-top:10px;
        top: -1px;
    }
</style>
<body>
<div style="overflow-y: auto;width: 100%;height: 100%;">
	<div class="shadow" style="height: 180px;width: calc(100% - 40px);margin-top: 10px;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;text-align: center;">
		<div id="sysInstall" class="card" style="background-color: #00D4A6;">
			<p class="cardTitle">系统装机</p>
			<div style="width: 100%;height: 60px;">
				<div class="leftContent" id="sysInstallVal">0<div class="rightUnit">MW</div></div>
			</div>
			<div class="downDiv" onclick="jumpTo(102)">
				<span class="downLeft">数据明细</span>
				<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
			</div>
		</div>
		<div id="nodeNum" class="card" style="background-color: #00CFFF;">
			<p class="cardTitle">节点数量</p>
			<div style="width: 100%;height: 60px;">
				<div class="leftContent" id="nodeNumVal">0<div class="rightUnit">个</div></div>
			</div>
			<div class="downDiv" onclick="jumpTo(117)">
				<span class="downLeft">数据明细</span>
				<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
			</div>
		</div>
		<div id="lineNum" class="card" style="background-color: #0ECFCE;">
			<p class="cardTitle">线路数量</p>
			<div style="width: 100%;height: 60px;">
				<div class="leftContent" id="lineNumVal">0<div class="rightUnit">条</div></div>
			</div>
			<div class="downDiv" onclick="jumpTo(128)">
				<span class="downLeft">数据明细</span>
				<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
			</div>
		</div>
		<div id="maxLoad" class="card" style="background-color: #FF94C8;">
			<p class="cardTitle">最大负荷</p>
			<div style="width: 100%;height: 60px;">
				<div class="leftContent" id="maxLoadVal">0<div class="rightUnit">MW</div></div>
			</div>
			<div class="downDiv" onclick="jumpTo(132)">
				<span class="downLeft">数据明细</span>
				<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
			</div>
		</div>
		<div id="loadPower" class="card" style="background-color: #CBA464;">
			<p class="cardTitle">负荷电量</p>
			<div style="width: 100%;height: 60px;">
				<div class="leftContent" id="loadPowerVal">0<div class="rightUnit">亿kWh</div></div>
			</div>
			<div class="downDiv" onclick="jumpTo(132)">
				<span class="downLeft">数据明细</span>
				<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
			</div>
		</div>
		<div id="externalIns" class="card" style="background-color: #FF7D46;">
			<p class="cardTitle">区外装机</p>
			<div style="width: 100%;height: 60px;">
				<div class="leftContent" id="externalInsVal">0<div class="rightUnit">MW</div></div>
			</div>
			<div class="downDiv" onclick="jumpTo(2101)">
				<span class="downLeft">数据明细</span>
				<span style="float: right;margin-right: 20px;"><img src="../images/right.png"></span>
			</div>
		</div>
	</div>
	<div id="capacityStatistDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">装机容量统计</span>
		</p>
		<div id="pieDiv" style="width: 100%;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;position: relative;text-align: center;">
			<div class="pie">
				<div style="height: 50px;width: 400px;"></div>
				<div id="firstEchart" style="height: 450px;width: 420px;"></div>
			</div>
			<div class="pie">
				<div style="height: 50px;width: 400px;padding-left: 50px;">
					<label class="control-label col-sm-1" style="margin-top: 15px;padding: 0px;width: 60px;font-weight: normal;">装机类型</label>
					<select class="form-control" id="typeSel" style="float: left;margin-top: 8px;padding: 5px;width: 140px;font-weight: normal;"></select>
				</div>
				<div id="secondEchart" style="height: 450px;width: 420px;"></div>
			</div>
			<div class="pie">
				<div style="height: 50px;width: 400px;padding-left: 50px;">
					<label class="control-label col-sm-1" style="margin-top: 15px;padding: 0px;width: 60px;font-weight: normal;">发电公司</label>
					<select class="form-control" id="companySel" style="float: left;margin-top: 8px;padding: 5px;width: 140px;font-weight: normal;"></select>
				</div>
				<div id="thridEchart" style="height: 450px;width: 420px;"></div>
			</div>
		</div>
		<p style="margin-top: 10px;padding-top: 10px;text-align: center;">
			<span style="font-weight: 700;font-size: 18px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">各地市各类型机组装机明细</span>
		</p>
		<div style="width: calc(100% - 30px);text-align: right;"><span>单位：MW</span></div>
		<table id="tableDetail"></table>
	</div>
	<div id="installCapDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;margin-bottom: 20px;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">装机数量统计</span>
		</p>
		<div id="installCapEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
		<table id="installCapTable"></table>
	</div>
	<!-- <div id="sectionStatistDiv" class="shadow" style="width: calc(100% - 40px);min-height: 450px;position: relative;">
		<p style="margin-top: 10px;padding-top: 10px;">
			<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">断面统计</span>
		</p>
		<div id="monthEleSurplusYearEchart" style="width: 100%;height: 400px;margin-top: 25px;"></div>
	</div> -->
	
</div>
</body>
</html>